<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="closeDialog"
      :show-close="true"
      :append-to-body="true"
      :close-on-click-modal="true"
      :class="{'mobile-el-dialog': showMobilePage}"
      class="deal-dialog"
      width="380px"
      @open="openDialog"
    >
      <Title title="退货入库" font-size="16px" style="margin-bottom:16px;"/>
      <el-form ref="dealForm" :model="paramsObj" :rules="rules" label-position="right" label-width="90px">
        <el-form-item label="订单编号:">
          <span>{{ paramsObj.orderNum || '--' }}</span>
        </el-form-item>
        <el-form-item label="成本价:">
          <PriceColumn :real-val="paramsObj.cost" :price="paramsObj.cost / 100" />
        </el-form-item>
        <el-form-item label="总成本:">
          <PriceColumn :real-val="handelTotalCost()" :price="handelTotalCost() / 100" />
        </el-form-item>
        <el-form-item label="入库数量:">
          <span>{{ paramsObj.inventoryCount || '--' }}</span>
        </el-form-item>
        <el-form-item label="入库时间:" prop="time">
          <el-date-picker
            v-model="paramsObj.time"
            :picker-options="pickerOptions"
            clearable
            type="datetime"
            placeholder="入库时间"
            value-format="timestamp"
            size="small"
            class="width240" />
        </el-form-item>
        <el-form-item label="含次品数量:">
          <el-input
            v-model="paramsObj.defectiveQuantity"
            oninput="if(value>999999999)value=999999999;if(value<0)value=0;"
            name="defectiveNums"
            type="number"
            placeholder="含次品数量"
            size="small"
            class="width240"
            @mousewheel.native.prevent />
        </el-form-item>
        <el-form-item label="备注:">
          <el-input
            v-model="paramsObj.remark"
            type="text"
            placeholder="备注"
            size="small"
            class="width240"/>
        </el-form-item>
        <el-form-item>
          <span>注意：如果有残次品请登记数量，残次品并不影响入库数量。</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="handleSubmit">确认</el-button>
        <el-button type="info" class="cancel-btn-style" size="small" @click="handleCancel">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Title from '@/components/Title';
import { takeStock } from '@/api/mengli';
import ElMessage from '@/utils/message';
import selectWithUserLoad from '@/components/Common/selectWithUserLoad';
import { mapState } from 'vuex';

export default {
  components: { Title, selectWithUserLoad },
  model: {
    prop: 'paramsObj',
    event: 'change'
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    paramsObj: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      rules: {
        time: [{ required: true, trigger: 'change', message: '请选择入库时间' }]
      }
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    pickerOptions() {
      return {
        disabledDate(time) {
          const now = new Date();
          const year = now.getFullYear();
          const month = now.getMonth();
          const deadline = new Date(year, month - 1, 1, 0, 0, 0);
          return time.getTime() < deadline.getTime();
        }
      };
    }
  },
  methods: {
    openDialog() {
      this.$refs.dealForm && this.$refs.dealForm.resetFields();
    },
    handelTotalCost() {
      if (this.paramsObj.cost && this.paramsObj.inventoryCount) {
        return this.paramsObj.cost * this.paramsObj.inventoryCount;
      } else {
        return '--';
      }
    },
    closeDialog() {
      this.$emit('closeRecordDialog');
    },
    handleSubmit() {
      this.$refs['dealForm'].validate(valid => {
        if (valid) {
          const { id, time, defectiveQuantity, remark } = this.paramsObj;
          const params = { id, time, defectiveQuantity, remark };
          takeStock(params).then(res => {
            if (res.code === 200) {
              ElMessage.success('操作成功！');
              this.$emit('closeRecordDialog', true);
              this.closeDialog();
            }
          }).catch(err => {
            console.log(err);
            this.$emit('closeDealDialog');
          });
        } else {
          return false;
        }
      });
    },
    handleCancel() {
      this.$emit('closeRecordDialog');
    }
  }
};
</script>

<style lang="scss" scoped>
.deal-dialog{
  border-radius: 10px;
  ::v-deep {
    .el-dialog{
      border-radius: 10px;
    }
    .el-dialog__header{
      padding: 0;
    }
    .el-dialog__body{
      padding: 16px 24px 0;
    }
    .dialog-footer{
      display: flex;
      justify-content: center;
    }
    .el-form-item{
      margin-bottom: 14px;
      .width240{
        width: 240px;
      }
      .el-form-item__error{
        padding: 0;
      }
    }
  }
}
</style>
